<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>curvyCorners Demo 3</title>
<script type="text/JavaScript" src="../curvycorners.src.js"></script>
<style>

.myBox {
  margin: 0.5in auto;
  color: #ffffff;
  width: 410px;
  height: 410px;
  padding: 20px;
  text-align: left;
  background-image: url(crosshatch.jpg);
  background-repeat: no-repeat;
  border:5px solid #000;
}

html,body{
  text-align: center;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0px;
}

</style>
<script type="text/JavaScript">

  curvyCorners.addEvent(window, 'load', initCorners);

  function initCorners() {
    var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }

    /*
    Usage:

    curvyCorners(settingsObj, selectorStr);
    curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);

    selectorStr ::= complexSelector [, complexSelector]...
    complexSelector ::= singleSelector[ singleSelector]
    singleSelector ::= idType | classType
    idType ::= #id
    classType ::= [tagName].className
    tagName ::= div|p|form|blockquote|frameset // others may work
    className : .name
    selector examples:
      #mydiv p.rounded
      #mypara
      .rounded
    */
    curvyCorners(settings, ".myBox");
  }

</script>
</head>

<body>
<h1>curvyCorners Demo 3</h1>
    <div class="myBox">
    <!-- si monumentum requiris, circumspicite -->
    </div>

</body>
</html>